import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Carousel, WhiteSpace } from "weaver-mobile";
import "../index.less";
import { getMeetingInfo } from "../../../api/index";

// const meetingInfo= {
//   id: 0,
//   images: ["/images/detail1.png"],
//   title: "年会庆典 |2021，我们永怀初心、筑梦未来",
//   startDate: "2021年04月27日",
//   startTime: "18:30",
//   endDate: "2021年04月27日",
//   endTime: "21:30",
//   duration: "3小时",
//   status: "未开始",
//   deadline: "2021-04-27 18:30:00",
//   detailAddress: "上海市黄浦区小东门街道中山南路917号3楼202室5号会议室",
//   introduction:
//     "2021年1月15日，中田集团年会在上海江苏饭店成功举办，中田集团创始团队与美甲部、美发部、养生部、舞蹈部、学院及后勤所有成员一起出席盛典，开启2021年中田集团新征途。",
// }

@withRouter
export default class MeetingDetail1 extends Component {
  state = {
    meetingInfo: null,
  };

  loadMeetingInfo(id) {
    getMeetingInfo({ id: id }).then((result) => {
      if (result.ret == 200) {
        result.data.imgs = ["/images/detail1.png"];
        this.setState({
          meetingInfo: result.data,
        });
        console.log(result.data);
      }
    });
  }

  componentDidMount() {
    document.title = "会议详情";
    this.loadMeetingInfo(this.props.match.params.id);
  }

  render() {
    if (this.state.meetingInfo == null) {
      return <div>加载中...</div>;
    }
    return (
      <div className="meeting-detail">
        {/* <div>
          <NavBar
            className="nav-bar"
            icon={<Icon type="left" />}
            leftContent="返回"
            onLeftClick={() => console.log("onLeftClick")}
          >
            会议详情
          </NavBar>
        </div> */}
        <div className="page">
          <img
            // key={img}
            src={"/images/detail1.png"}
            alt=""
            style={{ width: "100%", verticalAlign: "top" }}
          />
          {/* <Carousel autoplay={false} infinite>
            {this.state.meetingInfo.imgs.map((img) => {
              return (
                <img
                  key={img}
                  src={"/images/detail1.png"}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                />
              );
            })}
          </Carousel> */}
          <WhiteSpace size="lg" />
          <div className="main">
            <div className="title">{this.state.meetingInfo.title}</div>
            <div className="m-time">
              <div className="start">
                <div className="time">
                  {this.state.meetingInfo.meetingStartDate.split(" ")[1]}
                </div>
                <div className="date">
                  {" "}
                  {this.state.meetingInfo.meetingStartDate.split(" ")[0]}
                </div>
              </div>
              <div className="center">
                {this.state.meetingInfo.isStart ? (
                  <div className="status">已开始</div>
                ) : (
                  <div className="status not-start">未开始</div>
                )}

                <div className="duration">
                  <div className="text">
                    {this.state.meetingInfo.hours + "小时"}
                  </div>
                </div>
                <div className="time-zone">(GMT+08:00)</div>
              </div>
              <div className="end">
                <div className="time">
                  {this.state.meetingInfo.meetingEndDate.split(" ")[1]}
                </div>
                <div className="date">
                  {this.state.meetingInfo.meetingEndDate.split(" ")[0]}
                </div>
              </div>
            </div>
            <div className="info">
              <div className="label">报名日期：</div>
              <div className="content">
                报名截止日期 {this.state.meetingInfo.enrollEndDate}
              </div>
            </div>
            <div className="info">
              <div className="label">会议地址：</div>
              <div className="content">
                {this.state.meetingInfo.detailAddress}
              </div>
            </div>
          </div>
          <WhiteSpace size="lg" />
          <div className="introduction">
            <div className="title">会议简介:</div>
            <div
              className="content"
              dangerouslySetInnerHTML={{
                __html: this.state.meetingInfo.content,
              }}
            ></div>
          </div>
        </div>
        <div className="footer">
          <div className="btn">参会报名</div>
        </div>
      </div>
    );
  }
}
